window.onload = init;
var cesta = null;
function init() {
    cargarDatosCategorias();
    
}

function asignarEventosCategorias() {
    //Eventos de categoría    
    var categorias = document.querySelectorAll(".categoria");
    var i;
    
    for (i in categorias) {
        categorias[i].onclick = function (event) {
            //Estilo DOM
            //var idCategoria = this.parentNode.getAttribute("data-categoria");
            //Estilo Javascript
            var id = this.parentNode.dataset.categoria;
            var datos = {
                idCategoria: id
            }
            
            ejecutarAJAX_GET("./php/getCategoria.php", seleccionarCategoria, datos, id);
    
        }
    }
}
    
    
function asignarEventosCantidad(categoria) {    
    
    for (var i in categoria.elementos) {            
        var input = document.getElementById(categoria.elementos[i].id);        
        input.onchange = gestionarCesta;        
    }
}

function actualizarPantalla(subtotal) {
    if (subtotal) {
        gestionarSubtotal(subtotal);
    }
    mostrarCesta();
    //alert(cesta.getLineas().tam());
    mostrarAviso(!cesta || cesta.getLineas().tam() == 0);
    actualizarTotal();
}

function gestionarCesta (event) {
    var cantidad = event.target.value;
    var idArticulo = event.target.id;
    if (!cesta) {
        cesta = new MODELO.Pedido(1, tienda.clientes.getElemento(1),new Date());
    }    
    cesta.modificarPedido(idArticulo, cantidad);
    actualizarPantalla(event.target);
}

function actualizarTotal () {
    var total = document.getElementById("totalPedido");
    if (!cesta || cesta.getLineas().tam() == 0) {
        total.textContent = "";
    } else {
        total.textContent = cesta.importePedido().toFixed(2);
    }
}

function gestionarSubtotal(input) {
    
    var subtotal = input.nextSibling.firstChild.nextSibling;
    var precio = input.parentNode.parentNode.getElementsByTagName("span")[1].textContent;
    var cantidad = input.value;
    
    
    //alert(subtotal.parentNode.style.visibility);
    if (cantidad>0) {
        subtotal.textContent = (precio*cantidad).toFixed(2);
        subtotal.parentNode.style.visibility = "visible";
    } else {
        subtotal.textContent = 0;
        subtotal.parentNode.style.visibility = "hidden";
    }
    
}

function mostrarAviso(visible) {
    var aviso = document.getElementById("description");
    
    if (visible) {
        aviso.style.visibility = "visible";
    } else {
        aviso.style.visibility = "hidden";
    }
}
     

function mostrarCesta() {
    var tablaCesta = document.getElementById("basketTable");
    var datosCesta = tablaCesta.getElementsByTagName("tbody")[0];
    var lineas = cesta.getLineas();
    
    datosCesta.innerHTML = "";
    for (var i in lineas.elementos) {
        
        var linea = lineas.elementos[i];
        /*
        html += '<tr>';
        html += '<td>' + linea.articulo.valor + '</td>';
        html += '<td><span>' + linea.importeLinea().toFixed(2) + '</span>€</td>';
        html += '<td><a href="#">Eliminar (X)</a></td>';
        html += '</tr>';
         */
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        tr.appendChild(td1);
        var articulo = document.createTextNode(linea.articulo.valor);
        td1.appendChild(articulo);
        var td2 = document.createElement("td");
        tr.appendChild(td2);
        var span = document.createElement("span");
        td2.appendChild(span);
        var importeLinea = document.createTextNode(linea.importeLinea().toFixed(2));
        td2.appendChild(importeLinea);
        var signoEuro = document.createTextNode("€");
        td2.appendChild(signoEuro);
        var td3 = document.createElement("td");
        tr.appendChild(td3);
        var link = document.createElement("a");
        td3.appendChild(link);        
        link.setAttribute('href', '#'+linea.articulo.id);
        //link.href="http://www.google.es"; También funciona así
        
        var textoEnlace = document.createTextNode("Eliminar (X)");
        link.appendChild(textoEnlace);
        
        datosCesta.appendChild(tr);
        
        link.onclick = enlaceBorrar; //No se puede hacer anónima. Problema de closure.
    }
    
    
    
}

function enlaceBorrar(event) {
    
    
    var pos = event.target.href.indexOf("#");
    var idArticulo = event.target.href.substr(pos +1);
    
    cesta.modificarPedido(idArticulo ,0);
            
    var input = document.getElementById(idArticulo);            
    //alert(input.nextSibling.firstChild.nextSibling);
    var subtotal = input.nextSibling.firstChild.nextSibling;            
    subtotal.parentNode.style.visibility = "hidden";
    input.value = 0;
    mostrarCesta();
    //alert(cesta.getLineas().tam());
    mostrarAviso(!cesta || cesta.getLineas().tam() == 0);
    actualizarTotal();
            
    return false;   
}



function cargarDatosCategorias() {

    var divProductos = document.getElementById("datosArticulos");
        
    var categorias = tienda.categoriasArticulos;
    var html = "";
    var i = 0;
    for (i in categorias.elementos) {        
        var categoria = categorias.elementos[i];
        html += '<div class="pcdawgroup" data-categoria="'+ categoria.id +'">';
        html += '<div class="grouptitle categoria_vacia categoria">';
        html += categoria.valor;
        html += '</div>';
        
        
        html += '<div id="articulosCategoria' + categoria.id + '">';            
        html += '</div>';
        html += '</div>';
    }
    
    
    
    divProductos.innerHTML = html;
    
    asignarEventosCategorias();
    
    //Por si se hubieran cargado los artículos al principio
    for (i in categorias.elementos) { 
        var categoria = categorias.elementos[i];
        cargarDatosArticulos (categoria);
    }
    
}

function cargarDatosArticulos(categoria)  {    
    
    var divCategoria = document.getElementById('articulosCategoria' + categoria.id);
    //alert('articulosCategoria' + idCategoria);
    //alert()
    
    var html = "";
    for (var j in categoria.elementos) {
        var articulo = categoria.elementos[j];            
        html += '<div class="groupcontent">';
        html +='<label class="pcdawname"> <span >'+ articulo.valor +'</span> <span >'+articulo.precioArticulo+'</span>€</label>'
        html +='<span >';            
        html += '<input type="text" name="cantidad" id="'+articulo.id+'" value="0"/>';
        html += '<span class="groupcontent2 subtotal"> (<span ></span>€) </span>';
        html +='</span>';
        html += '</div>';            
    }    
    
    
    divCategoria.innerHTML = html;
    asignarEventosCantidad(categoria);
}
        
function seleccionarCategoria(JSONArticulos, idCategoria) {
    var divArticulos = document.getElementById('articulosCategoria' + idCategoria);
    var divCategoria = divArticulos.parentNode.firstChild;
    
    //alert(divCategoria.onclick);
    
    //Después de recuperar los artículos cambio el comportamiento
  
    
    toggleClass(divCategoria, "categoria_vacia", "categoria_no_vacia");
    addClass(divArticulos, "visible");
    divCategoria.onclick = function (event) {
        
        if (hasClass(divArticulos, "visible")) {
            toggleClass(divArticulos, "visible", "no_visible");
            toggleClass(divCategoria, "categoria_no_vacia", "categoria_vacia");
        } else {
            toggleClass(divArticulos, "no_visible", "visible");
            toggleClass(divCategoria, "categoria_vacia", "categoria_no_vacia");
        }
        
                
    }
    
    var articulos = JSON.parse(JSONArticulos);
    //alert(idCategoria);
    //alert(JSONArticulos);
    var categoria = tienda.categoriasArticulos.getCategoria(idCategoria);
    
    for (var i in articulos) {
        categoria.addArticulo(articulos[i].idArticulo, articulos[i].nombreArticulo, articulos[i].precioArticulo);        
    }    
    cargarDatosArticulos(categoria);
    
}